let yellowBeanBox = document.querySelector('.yellow_bean_box');
let yellowBeanBoxStyle = window.getComputedStyle(yellowBeanBox, null);
let yellowBean = document.querySelector('.yellow_bean');
let points = document.querySelector('.points');
let spans = points.querySelectorAll('span');
let fromDeg = 45; //小黄豆起始角度
let startDeg = 90; //小黄豆结束角度初始化
let beanTranslateX = 0; //小黄豆位移初始化

//小黑点显示与消失
function spansAnimation(spanCout) {
    let spansGone = setInterval(()=>{
        if(spanCout === spans.length) {
            for(let i = 0; i < spans.length; i++) {
                spans[i].style.display = 'inline-block';
            }
            clearInterval(spansGone);
        }else {
            spans[spanCout].style.display = 'none';
            spanCout++;
        }
    }, 500);     
}

spansAnimation(0);

//小黄豆张嘴动画
function yellowBeanOpen(fromDeg, startDeg, beanTranslateX) {
    if(yellowBeanBoxStyle.getPropertyValue('display') === 'none') return;
    if(fromDeg <= 45) {
        if(beanTranslateX >= 120) {
            spansAnimation(0);
            beanTranslateX = 0;
        }
        requestAnimationFrame(yellowBeanShut.bind(this, fromDeg, startDeg, beanTranslateX));
        return;
    }
    fromDeg -= 2;
    startDeg += 4;
    beanTranslateX += 1;
    yellowBean.style = `background-image:conic-gradient(from ${fromDeg}deg, rgb(0,0,0,0) 
    ${startDeg}deg, yellow ${startDeg}deg);transform: translateX(${beanTranslateX}px);`;
    requestAnimationFrame(yellowBeanOpen.bind(this, fromDeg, startDeg, beanTranslateX));
}

//小黄豆闭嘴动画
function yellowBeanShut(fromDeg, startDeg, beanTranslateX) {
    if(yellowBeanBoxStyle.getPropertyValue('display') === 'none') return;
    if(fromDeg >= 90) {
        if(beanTranslateX >= 120) {
            spansAnimation(0);
            beanTranslateX = 0;
        }
        requestAnimationFrame(yellowBeanOpen.bind(this, fromDeg, startDeg, beanTranslateX));
        return;
    }
    fromDeg += 2;
    startDeg -= 4;
    beanTranslateX += 1;
    yellowBean.style = `background-image:conic-gradient(from ${fromDeg}deg, rgb(0,0,0,0) 
    ${startDeg}deg, yellow ${startDeg}deg);transform: translateX(${beanTranslateX}px);`;
    requestAnimationFrame(yellowBeanShut.bind(this, fromDeg, startDeg, beanTranslateX));
}

requestAnimationFrame(yellowBeanShut.bind(this, fromDeg, startDeg, beanTranslateX));

